<template>
  <el-dialog :visible.sync="visible" title="收款信息填写" :close-on-click-modal="false"
    :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
      :label-width="$i18n.locale === 'en-US' ? '150px' : '110px'">
      <el-form-item label="支付金额" prop="payAmount">
        <el-input-number style="width: 100%" v-model="dataForm.payAmount" :precision="2" :step="0.1" :max="10000000" placeholder="支付金额"></el-input-number>
      </el-form-item>
      <el-form-item label="实际付款时间" prop="payDate">
        <el-date-picker
          style="width: 100%"
          v-model="dataForm.payDate"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="实际付款时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="支付方式" prop="paymentMethod">
        <el-select style="width: 100%" v-model="dataForm.paymentMethod" clearable placeholder="请选择支付方式">
          <el-option v-for="item in paymentMethodList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注信息" prop="remark">
        <el-input type="textarea" v-model="dataForm.remark" placeholder="备注信息"></el-input>
      </el-form-item>
      <el-form-item label="上传支付截图" prop="imageDataList">
        <el-upload
          class="upload-demo"
          :action="uploadUrl"
          :headers="headers"
          :show-file-list="true"
          :multiple="true"
          :on-success="imageHandleAvatarSuccess"
          :on-change="imageHandleChange"
          :on-remove="imageRemove"
          :before-upload="imageOnBeforeUpload"
          :file-list="imageList">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import Cookies from 'js-cookie'
import debounce from 'lodash/debounce'
export default {
  data() {
    return {
      uploadUrl: window.SITE_CONFIG['apiURL'] + '/order/order/upload/files',
      headers: { token: Cookies.get('token') },
      visible: false,
      dataForm: {
        orderId: '',
        payAmount: '',
        payDate: '',
        paymentMethod: '',
        remark: '',
        imageDataList: [],
      },
      paymentMethodList: [
        {
          label: '公账',
          value: 0
        },
        {
          label: '个人',
          value: 1
        }
      ],
      imageList: [],
      pushImageList: []
    }
  },
  computed: {
    dataRule() {
      return {
        payAmount: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        payDate: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        paymentMethod: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        imageDataList: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init() {
      this.imageList = []
      this.pushImageList = []
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
      })
    },
    // 上传格式做限制
    imageOnBeforeUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "jpg" || testmsg === "jpeg" || testmsg === "JPEG";
      if (!extension) {
        setTimeout(() => {
          this.$message({
            message: `文件"${file.name}"只能上传jpg、jpeg、JPEG格式!`,
            type: "warning"
          });
        })
        this.imageList =[]
      }
      return extension;
    },
    imageHandleChange(file, imageList) {
      this.imageList = imageList.slice(-3);
    },
    imageHandleAvatarSuccess(res, file) {
      this.pushImageList.push(res.data);
      this.dataForm.imageDataList = this.pushImageList
    },
    imageRemove(file, imageList) {
      console.log(file)
      console.log(imageList)
      this.dataForm.imageDataList = imageList
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.$http.post('/order/orderpayment', this.dataForm).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => { })
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
